什麼是 z-index?

為 Interview Bit 的第 20 題。

簡介

z-index決定元素的堆疊順序。在同一階層下，z-index 數字比較高的會在 z-index數字較低的前面，也就是z-index 數字比較高會覆蓋 z-index數字較低。元素的 z-index 預設都屬於 0。z-index數字可以是負值。

使用方法

z-index 需要注意 2 點：

1. z-index 需要搭配 position: absolute，position: relative， position: fixed，或是 position: sticky 和 flex items 才會有效。

2. 在相同層級的 div，要覆蓋的 div的z-index 的數字需要大於被覆蓋的 div的 z-index。

範例

這是我們想要的結果圖，現在有紅藍2個 div，想要讓藍色底一直在左上角，且紅色底的 div 必須要完整顯示 Hello 字串，想請問如何用 z-index 才能做到?
CodePen boiler plate

因為我們想要把底色藍色固定在左上角，所以使用了 position: fixed ，並且假設距離視窗高5px，距離視窗左邊20px，但同時我們也想顯示 Hello 文字，所以將紅色 div的 z-index: 10;，表示紅色底的 div應該是會在上面， 藍色底的 div會在下面，但是其實發現 z-index 是無效的。

<div id="over">
  Hello Hello Hello HelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under"></div>

#over {
  width: 600px;
  background: red;
  z-index: 10; /*這一行是多加的，但是發現其實無效*/ 
}

#under {
  /*相對於 html root，設定離 html root top 5px，left 20px*/
  position: fixed;
  top: 5px;
  left: 20px;
  border: 1px solid;
  width: 420px;
  height: 50px;
  background: blue;
}

為什麼無效，其實可以看到剛剛的使用方法的第1點， z-index 需要搭配 position: static 以外的 position 屬性，所以我們必須將紅色 div 的 position設定為 position: relative，這樣就會有效了。

CodePen 完成範例

<div id="over">
  Hello Hello Hello HelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under"></div>

#over {
  width: 600px;
  background: red;
  z-index: 10; /*這一行是多加的，但是發現其實無效*/ 
  position: relative /*需要加入 position*/
}

#under {
  /*相對於 html root，設定離 html root top 5px，left 20px*/
  position: fixed;
  top: 5px;
  left: 20px;
  border: 1px solid;
  width: 420px;
  height: 50px;
  background: blue;
}

結果圖：

Debug

常常寫網頁的時候會發現 z-index 根本無效，可以遵照以下步驟 debug 試試看。

（以下轉自解决position:relative情况下，z-index无效的方法）

1、判斷被覆蓋的層（想要置頂的層）的 position 是否也為 relative 或者 absolute
2、如果1成立，則判斷是否此層的 z-index 比誤覆蓋的層的 z-index 數值大
3、如果2成立，判斷是否此層的父級元素比誤覆蓋的層的z-index數值大
4、如果3成立，判斷是否此層的父級元素比誤覆蓋的層的父級層的 z-index 數值大

參考資料：
解决position:relative情况下，z-index无效的方法
mdn web docs - z-index